Nanodegree key: nd001
Version: 1.0.0
Locale: en-us
Become a Front-End Web Developer by completing a variety of projects for your portfolio - become an HTML, CSS and JavaScript pro!
Content
Part 01 : Web Foundations
In Web Foundations you'll learn about the Web and its central technologies. You'll learn about the foundational structure of all websites, HTML. You'll build on top of a website's structure with CSS to create beautifully designed sites. Finally, you'll learn to how to develop a web project like a professional using the version control tool, Git. You'll build three projects, and each project should take roughly one or two afternoons to complete from start to finish.
-
Module 01: Day 1
-
Lesson 01: Establishing a Web Developer Mindset
In Establishing a Web Developer Mindset, you'll learn about the history of the languages you'll be studying, the Web, and our place today as Web Developers in an evolving story. After learning about problem solving strategies, you'll write a letter to your future self describing how you can overcome any challenge ahead in this Nanodegree, and set some goals for what you want to achieve. You'll also learn how to get feedback from Udacity Project Reviewers. Go ahead, get started now!
-
Lesson 02: Nanodegree Career Services
The Careers team at Udacity is here to help you move forward in your career - whether it's finding a new job, exploring a new career path, or applying new skills to your current job.
-
-
Module 02: HTML & CSS Syntax
-
Lesson 01: HTML Syntax
Set up your development environment for writing HTML and learn basic tags and syntax.
- Concept 01: Lesson Introduction
- Concept 02: HTML Structure Part 1
- Concept 03: Make Your First Element
- Concept 04: Environments
- Concept 05: Text Editors
- Concept 06: Browsers
- Concept 07: Workflow
- Concept 08: Trees
- Concept 09: HTML and Trees
- Concept 10: Spot the Bug
- Concept 11: HTML Research
- Concept 12: HTML Structure Part 2
- Concept 13: HTML Documents in Depth
- Concept 14: Lesson Wrap Up
-
Lesson 02: HTML Syntax Problem Set
Get practice creating HTML documents and writing tags with this collection of fun challenges.
- Concept 01: Welcome to the Problem Set!
- Concept 02: Make a Button
- Concept 03: Make a Button Solution
- Concept 04: Make All the Headers
- Concept 05: Make a List
- Concept 06: Tree to HTML
- Concept 07: Constructing Links
- Concept 08: Add an Image
- Concept 09: A Guide to Paths
- Concept 10: Figures
- Concept 11: Mockup to Website
-
Lesson 03: Mockup to Article
Put your HTML skills to use by converting a designer's mockup of a blog article into a real webpage!
-
Lesson 04: CSS Syntax
Learn the basics of CSS syntax and get started adding style to your websites.
- Concept 01: Getting Started with CSS
- Concept 02: What is CSS?
- Concept 03: CSS or HTML?
- Concept 04: CSS Rulesets
- Concept 05: CSS Syntax
- Concept 06: Comments
- Concept 07: Tag Selectors
- Concept 08: Attributes and Selectors
- Concept 09: Using Selectors
- Concept 10: Using CSS References
- Concept 11: Developer Tools
- Concept 12: Developer Tools on Different Browsers
- Concept 13: Quiz: Using Developer Tools
- Concept 14: CSS Units
- Concept 15: Units in CSS
- Concept 16: CSS Colors
- Concept 17: Identifying Colors
- Concept 18: Outro
-
Lesson 05: CSS Syntax Problem Set
Practice writing CSS and styling websites while exploring new properties in this problem set.
- Concept 01: Welcome to the Problem Set!
- Concept 02: Style an Image
- Concept 03: Style the Font
- Concept 04: Writing Selectors
- Concept 05: Using Attributes
- Concept 06: Attributes Workspace
- Concept 07: Slack Card
- Concept 08: Slack Card Workspace
- Concept 09: Udacity Site Header
- Concept 10: Udacity Site Header Workspace
- Concept 11: What is a Stylesheet?
- Concept 12: Link to a Stylesheet
-
Lesson 06: How to Write Code Faster
Learn tips, tricks, and shortcuts to improve your developer workflow and customize your code editor with packages and themes.
- Concept 01: Writing Code Faster
- Concept 02: Sublime Text and Atom Keyboard Shortcuts
- Concept 03: Practice Keyboard Shortcuts
- Concept 04: Keyboard Shortcuts
- Concept 05: Extending Sublime Text and Atom
- Concept 06: Installing Packages and Themes
- Concept 07: Recommended Packages
- Concept 08: Recommended Themes
- Concept 09: What’s Your Favorite Theme?
- Concept 10: Coder, Better, Tooler, Hacker
-
Lesson 07: Animal Trading Cards
Use your knowledge of HTML and CSS to create a web-based trading card depicting your favorite animal.
-
Part 02 : Responsive Websites
-
Module 01: Sizing Elements
-
Lesson 01: Box Model and Semantic Elements
Dive deeper into HTML and CSS, learning about the Box Model and writing expressive HTML using semantic elements.
- Concept 01: Guess the Render Game
- Concept 02: James' Solution
- Concept 03: Cameron's Solution
- Concept 04: Who's the Winner?
- Concept 05: Boxes, Boxes Everywhere
- Concept 06: Boxes on the Web
- Concept 07: The Box Model
- Concept 08: Border-Box
- Concept 09: Changing Boxes
- Concept 10: Box Model Sizing
- Concept 11: Containers
- Concept 12: Relative Widths
- Concept 13: Inline Boxes
- Concept 14: Semantic Elements
- Concept 15: Types of Elements
- Concept 16: Element Research
- Concept 17: Outro
-
Lesson 02: Box Model and Semantic Elements Problem Set
Put your HTML and CSS knowledge to the test with this problem set on the box model and semantic elements.
- Concept 01: Welcome to the Problem Set
- Concept 02: IMPORTANT! Udacity Front End Feedback Extension
- Concept 03: Keep it Boxy
- Concept 04: Keep it Boxy Solution
- Concept 05: Alignment and Line-Height
- Concept 06: Text-Align with Cheetahs
- Concept 07: Fun with Vertical-Align
- Concept 08: Playing with Line-Height
- Concept 09: Making Peach Ice Cream
- Concept 10: Set the Table
- Concept 11: Div Soup Clean Up
-
Lesson 03: Positioning
Position elements using different flows.
- Concept 01: Intro
- Concept 02: Normal Flow
- Concept 03: Normal Flow Quiz
- Concept 04: Inline-Block
- Concept 05: Why Two Lines?
- Concept 06: Anonymous Boxes
- Concept 07: Relative Flow
- Concept 08: Relative Flow Quiz
- Concept 09: Relative Neighbors
- Concept 10: 3D Websites
- Concept 11: Document and Viewport
- Concept 12: Fixed Flow
- Concept 13: Fixed Flow Quiz
- Concept 14: Absolute Flow
- Concept 15: Inline Formatting
- Concept 16: Debugging CSS Part 1
- Concept 17: Debugging CSS Part 2
- Concept 18: Debugging CSS Solution
- Concept 19: Outro
-
Lesson 04: Floats
Use floats to extend and improve your ability to create layouts.
-
-
Module 02: Intro To HTML and CSS
-
Lesson 01: HTML, CSS, and Boxes
Follow along as Jessica Uelmen and Cameron Pittman show you how to use HTML and CSS to create box style layouts.
- Concept 01: The First Step
- Concept 02: Exploring the Web
- Concept 03: Page Structure
- Concept 04: Summary of HTML
- Concept 05: Visual Styling
- Concept 06: HTML-CSS-DOM
- Concept 07: Boxes Everywhere
- Concept 08: Boxes, Grids and Rules
- Concept 09: Boxifying Design
- Concept 10: Interview with Jacques
- Concept 11: Boxes To HTML
- Concept 12: Quiz: Creating the Files
- Concept 13: Adding Style
- Concept 14: Understanding CSS
- Concept 15: Styling Up
- Concept 16: Using Semantic Tags
- Concept 17: The Box Revisited
- Concept 18: Positioning Boxes
- Concept 19: Adding Image
- Concept 20: Code, Test, Refine
- Concept 21: More on DevTools
- Concept 22: Comparing with the Design
- Concept 23: Verifying HTML and CSS
- Concept 24: Conclusion
-
Lesson 02: CSS Frameworks, Responsive Layouts
Learn how to create grid-based responsive web layouts that look great on any device, from desktop to mobile.
- Concept 01: Intro
- Concept 02: Grid Based Design
- Concept 03: Building a Framework
- Concept 04: Responsive Web Pages
- Concept 05: Defining the Layout
- Concept 06: Creating the Project
- Concept 07: From Idea to Code
- Concept 08: Framework Version 01
- Concept 09: Negative Space
- Concept 10: Overflows
- Concept 11: Media Specific CSS
- Concept 12: CSS Resetting
- Concept 13: Your Problem Has Been Solved Before
- Concept 14: Applying the Framework
- Concept 15: Semantic Structure
- Concept 16: Tuning the Page
- Concept 17: Continuous Improvement
- Concept 18: Code, Test, Refine, Repeat
- Concept 19: Conclusion
-
Lesson 03: Bootstrap and Other Frameworks
Learn the ins and outs of Bootstrap, the most popular CSS framework in use today.
- Concept 01: Intro
- Concept 02: Site Structure
- Concept 03: Choosing a Framework
- Concept 04: Reading Documentation
- Concept 05: Choosing Features
- Concept 06: Minified CSS Files
- Concept 07: Exploring the Framework
- Concept 08: Applying Bootstrap Grid System
- Concept 09: Responsive Page
- Concept 10: Using Bootstrap Typography
- Concept 11: Custom CSS for Your Site
- Concept 12: Watch a Front End Engineer Do This
- Concept 13: Watch a Front End Engineer Do This pt. 2
- Concept 14: A Small Taste of Interactivity
- Concept 15: Self-built Framework vs Existing
- Concept 16: Conclusion
-
-
Module 03: Responsive Web Design Fundamentals
-
Lesson 01: Why Responsive?
Pete Lepage, Developer Advocate at Google, explains why responsive design is so important and helps you set up your development environment.
- Concept 01: Sites On Mobile
- Concept 02: Share Your Great & Awful Sites
- Concept 03: Intro to Project
- Concept 04: Pan, Zoom, Touch, Ick
- Concept 05: Emulators, Simulators and Real Devices
- Concept 06: Setting up Chrome's Dev Tools
- Concept 07: Remote Debugging Intro
- Concept 08: Setup for Mobile
- Concept 09: Using Dev Tools on Mobile
- Concept 10: Mobile Tools for iOS
- Concept 11: Lesson Summary
-
Lesson 02: Starting Small
Dive into the specifics of how pixels on a webpage are rendered and how that impacts the development process.
- Concept 01: Defining the Viewport
- Concept 02: Pixels, pixels and moar pixels!
- Concept 03: Pixelation
- Concept 04: Calculating DPR
- Concept 05: What's the difference?
- Concept 06: Calculating CSS Pixels
- Concept 07: How wide is the viewport?
- Concept 08: Setting the Viewport
- Concept 09: Setting the Viewport
- Concept 10: Large Fixed Width Elements
- Concept 11: Max-width on elements
- Concept 12: Relative Sizes
- Concept 13: Tap Target Sizes
- Concept 14: Tap Targets
- Concept 15: Start Small
- Concept 16: Project Part 1
- Concept 17: Project Solution - Long
- Concept 18: Lesson Summary
-
Lesson 03: Building Up
Learn the most important tools in developing any responsive web application: media queries and flexbox.
- Concept 01: Lesson Intro
- Concept 02: Basic Media Query Intro
- Concept 03: Adding a Basic Media Query
- Concept 04: Adding a basic media query 2
- Concept 05: Next Step Media Queries
- Concept 06: Breakpoints
- Concept 07: Breakpoints Pt. II
- Concept 08: Number of Breakpoints
- Concept 09: Picking Breakpoints
- Concept 10: Picking Breakpoints 2
- Concept 11: Pick a Breakpoint
- Concept 12: Complex Media Queries
- Concept 13: What Styles Are Applied?
- Concept 14: Grids
- Concept 15: Flexbox Intro
- Concept 16: Flexbox Container
- Concept 17: Flex Item
- Concept 18: Deconstructing a Flexbox Layout
- Concept 19: Deconstructing a Flexbox Layout
- Concept 20: Lesson Summary
-
Lesson 04: Common Responsive Patterns
Walk through the most popular responsive layout patterns and learn the tools needed to implement them in your own designs.
- Concept 01: Intro to Patterns
- Concept 02: Pattern - Column Drop
- Concept 03: Pattern - Mostly Fluid
- Concept 04: Mostly Fluid Part 1
- Concept 05: Mostly Fluid Part 2
- Concept 06: Combining Fluid Layouts
- Concept 07: Pattern - Layout Shifter
- Concept 08: Which is Which?
- Concept 09: Pattern - Off Canvas
- Concept 10: Off Canvas Visualization
- Concept 11: Project Update Part 2
- Concept 12: Lesson Summary
-
Lesson 05: Optimizations
Learn how to optimize images, tables, and fonts to make for the best responsive layouts.
- Concept 01: Lesson Intro
- Concept 02: Images
- Concept 03: Responsive Tables Intro
- Concept 04: Responsive Tables - Hidden Columns
- Concept 05: Hide Some Columns
- Concept 06: Responsive Tables - No More Tables
- Concept 07: Responsive Tables - Contained Scrolling
- Concept 08: Fonts
- Concept 09: Minor Breakpoints
- Concept 10: Final Project Updates
- Concept 11: Wrap Up
-
-
Module 04: Responsive Images
-
Lesson 01: Getting Up and Running
Sam Dutton, developer advocate at Google, explains the importance of getting responsive images right and helps you setup mobile developer tools.
-
Lesson 02: Units, Formats, Environments
Optimize images to display beautifully on all screen sizes. Learn about the difference between Raster vs Vector images, responsive CSS units, and setting up optimization tools.
- Concept 01: Sizing Intro
- Concept 02: All about Bits and Pixels
- Concept 03: Requests and Revenue
- Concept 04: Relative Sizing
- Concept 05: IMPORTANT! Udacity Front End Feedback Extension
- Concept 06: calc()
- Concept 07: Landscape and Portrait
- Concept 08: Less Well Known CSS Units
- Concept 09: Raster and Vector
- Concept 10: Raster or Vector Banner?
- Concept 11: Raster and Vector Identification
- Concept 12: File formats
- Concept 13: Spot the Differences
- Concept 14: Spot the Differences 2
- Concept 15: Image Compression
- Concept 16: Project Part 1
- Concept 17: Lesson Summary
-
Lesson 03: Images with Markup
Dive deep into image alternatives like CSS and icon fonts and learn common strategies to alleviate latency.
- Concept 01: Performance
- Concept 02: Text Problems
- Concept 03: CSS Techniques
- Concept 04: CSS background images
- Concept 05: CSS background image techniques
- Concept 06: Symbol characters
- Concept 07: Unicode Treble Clef
- Concept 08: Icon Fonts
- Concept 09: Inlining images with SVG and data URIs
- Concept 10: Strategy Quiz 1
- Concept 11: Strategy Quiz 2
- Concept 12: Strategy Quiz 3
- Concept 13: Strategy Quiz 4
- Concept 14: Project Part 2
- Concept 15: Lesson Summary
-
Lesson 04: Full Responsiveness
Learn to use the srcset attribute and the picture element to choose images of the right size for your application for every viewing context.
- Concept 01: Responding to Screen Capability & View
- Concept 02: srcset
- Concept 03: Sizes Attribute
- Concept 04: srcset Quiz
- Concept 05: srcset and sizes
- Concept 06: The Picture Element
- Concept 07: The Full Monty
- Concept 08: Accessibility
- Concept 09: Accessibility Promise
- Concept 10: Project Part 3
- Concept 11: Course Conclusion
-
-
Module 05: Build a Portfolio Site
-
Lesson 01: Build a Portfolio Site
Given a pdf mockup of a website from a designer, translate it to a real website using your HTML and CSS skills.
-
Part 03 : JavaScript Foundations
In JavaScript Foundations, you'll learn the most popular programming language in the world - JavaScript! You'll learn the basics of the language and then take the next step by looking at the popular JavaScript library, jQuery. You will write JavaScript code to programmatically generate your resume, leveraging JavaScript to add content to a resume template composed of HTML and CSS.
-
Module 01: Intro to JavaScript
-
Lesson 01: What is JavaScript?
Learn the history of JavaScript and start writing your code immediately using the JavaScript console.
-
Lesson 02: Data Types & Variables
Learn to represent real-world data using JavaScript variables, and distinguish between the different data types in the language.
- Concept 01: Intro to Data Types
- Concept 02: Numbers
- Concept 03: Comments
- Concept 04: Quiz: First Expression (2-1)
- Concept 05: Strings
- Concept 06: String Concatenation
- Concept 07: Variables
- Concept 08: Quiz: Converting Temperatures (2-2)
- Concept 09: String Index
- Concept 10: Escaping Strings
- Concept 11: Comparing Strings
- Concept 12: Quiz: Favorite Food (2-3)
- Concept 13: Quiz: String Equality for All (2-4)
- Concept 14: Quiz: All Tied Up (2-5)
- Concept 15: Quiz: Yosa Buson (2-6)
- Concept 16: Booleans
- Concept 17: Quiz: Facebook Post (2-7)
- Concept 18: Null, Undefined, and NaN
- Concept 19: Equality
- Concept 20: Quiz: Semicolons! (2-8)
- Concept 21: Quiz: What's my Name? (2-9)
- Concept 22: Quiz: Out to Dinner (2-10)
- Concept 23: Quiz: Mad Libs (2-11)
- Concept 24: Quiz: One Awesome Message (2-12)
- Concept 25: Lesson 2 Summary
-
Lesson 03: Conditionals
Learn how to add logic to your JavaScript programs using conditional statements.
- Concept 01: Intro to Conditionals
- Concept 02: Quiz: Flowcharts (3-1)
- Concept 03: Flowchart to Code
- Concept 04: If...Else Statements
- Concept 05: Else If Statements
- Concept 06: Quiz: Even or Odd (3-2)
- Concept 07: Quiz: Musical Groups (3-3)
- Concept 08: Quiz: Murder Mystery (3-4)
- Concept 09: More Complex Problems
- Concept 10: Logical Operators
- Concept 11: Logical AND and OR
- Concept 12: Quiz: Checking your Balance (3-5)
- Concept 13: Quiz: Ice Cream (3-6)
- Concept 14: Quiz: What do I Wear? (3-7)
- Concept 15: Advanced Conditionals
- Concept 16: Truthy and Falsy
- Concept 17: Ternary Operator
- Concept 18: Quiz: Navigating the Food Chain (3-8)
- Concept 19: Switch Statement
- Concept 20: Falling-through
- Concept 21: Quiz: Back to School (3-9)
- Concept 22: Lesson 3 Summary
-
Lesson 04: Loops
Harness the power of JavaScript loops to reduce code duplication and automate repetitive tasks.
- Concept 01: Intro to Loops
- Concept 02: While Loops
- Concept 03: Parts of a While Loop
- Concept 04: Quiz: JuliaJames (4-1)
- Concept 05: Quiz: 99 Bottles of Juice (4-2)
- Concept 06: Quiz: Countdown, Liftoff! (4-3)
- Concept 07: For Loops
- Concept 08: Parts of a For Loop
- Concept 09: Nested Loops
- Concept 10: Increment and Decrement
- Concept 11: Quiz: Changing the Loop (4-4)
- Concept 12: Quiz: Fix the Error 1 (4-5)
- Concept 13: Quiz: Fix the Error 2 (4-6)
- Concept 14: Quiz: Factorials! (4-7)
- Concept 15: Quiz: Find my Seat (4-8)
- Concept 16: Lesson 4 Summary
-
Lesson 05: Functions
Dive into the world of JavaScript functions. Learn to harness their power to streamline and organize your programs.
- Concept 01: Intro to Functions
- Concept 02: Function Example
- Concept 03: Declaring Functions
- Concept 04: Function Recap
- Concept 05: Quiz: Laugh it Off 1 (5-1)
- Concept 06: Quiz: Laugh it Off 2 (5-2)
- Concept 07: Return Values
- Concept 08: Using Return Values
- Concept 09: Scope
- Concept 10: Scope Example
- Concept 11: Shadowing
- Concept 12: Global Variables
- Concept 13: Scope Recap
- Concept 14: Hoisting
- Concept 15: Hoisting Recap
- Concept 16: Quiz: Build a Triangle (5-3)
- Concept 17: Function Expressions
- Concept 18: Patterns with Function Expressions
- Concept 19: Function Expression Recap
- Concept 20: Quiz: Laugh (5-4)
- Concept 21: Quiz: Cry (5-5)
- Concept 22: Quiz: Inline (5-6)
- Concept 23: Lesson 5 Summary
-
Lesson 06: Arrays
Learn how to use Arrays to store complex data in your JavaScript programs.
- Concept 01: Intro to Arrays
- Concept 02: Donuts to Code
- Concept 03: Creating an Array
- Concept 04: Accessing Array Elements
- Concept 05: Array Index
- Concept 06: Quiz: UdaciFamily (6-1)
- Concept 07: Quiz: Building the Crew (6-2)
- Concept 08: Quiz: The Price is Right (6-3)
- Concept 09: Array Properties and Methods
- Concept 10: Length
- Concept 11: Push
- Concept 12: Pop
- Concept 13: Splice
- Concept 14: Quiz: Colors of the Rainbow (6-4)
- Concept 15: Quiz: Quidditch Cup (6-5)
- Concept 16: Quiz: Joining the Crew (6-6)
- Concept 17: Quiz: Checking out the Docs (6-7)
- Concept 18: Array Loops
- Concept 19: The forEach Loop
- Concept 20: Quiz: Another Type of Loop (6-8)
- Concept 21: Map
- Concept 22: Quiz: I Got Bills (6-9)
- Concept 23: Arrays in Arrays
- Concept 24: 2D Donut Arrays
- Concept 25: Quiz: Nested Numbers (6-10)
- Concept 26: Lesson 6 Summary
-
Lesson 07: Objects
Meet the next JavaScript data structure: the Object. Learn to use it to store complex data alongside Arrays.
- Concept 01: Intro to Objects
- Concept 02: Objects in Code
- Concept 03: Quiz: Umbrella (7-1)
- Concept 04: Objects
- Concept 05: Object Literals
- Concept 06: Naming Conventions
- Concept 07: Summary of Objects
- Concept 08: Quiz: Menu Items (7-2)
- Concept 09: Quiz: Bank Accounts 1 (7-3)
- Concept 10: Quiz: Bank Accounts 2 (7-4)
- Concept 11: Quiz: Facebook Friends (7-5)
- Concept 12: Quiz: Donuts Revisited (7-6)
- Concept 13: Lesson 7 Summary
-
-
Module 02: JavaScript Basics
-
Lesson 01: Getting Up and Running
Meet your next assignment: The Online Resume project. While building this project, you'll learn the importance of the browser's
console.log
as well as a brief intro to the popular JavaScript library, jQuery.- Concept 01: Welcome to the Course!
- Concept 02: Resume Introduction
- Concept 03: Your Goals
- Concept 04: The GitHub Repo
- Concept 05: Download the GH Repo
- Concept 06: A Note about HTML
- Concept 07: The Resume's HTML
- Concept 08: CSS and JS in the Resume
- Concept 09: The Browser JavaScript Console
- Concept 10: console.log()
- Concept 11: Hacking Udacity's Front Page
- Concept 12: Using .append() to Build a Page
- Concept 13: Try .append() for Yourself
- Concept 14: Technologies and Techniques Quiz
-
Lesson 02: Data Types
Learn to represent real world data using JavaScript. You'll gain experience working with strings, booleans, arrays, objects, and JSON data structures.
- Concept 01: var loveJS = true;
- Concept 02: Save and .append() Data
- Concept 03: string.replace()
- Concept 04: Mixing .replace() and .append()
- Concept 05: Format Data, Build a Resume Header
- Concept 06: String Manipulation Quiz 1
- Concept 07: String Manipulation Quiz 1 Solution
- Concept 08: Truthy/Falsy
- Concept 09: var quiz = true;
- Concept 10: Arrays
- Concept 11: .append()ing Arrays Quiz
- Concept 12: Array Manipulation
- Concept 13: String Manipulation Quiz 2
- Concept 14: Object Literal Notation
- Concept 15: Biography Quiz
- Concept 16: Dot and Bracket Notation
- Concept 17: Practice with Objects
- Concept 18: A Note about JSON
- Concept 19: JSON
- Concept 20: Validating JSON
- Concept 21: Validating JSON Quiz
- Concept 22: All the Resume Sections
-
Lesson 03: Flow Control
Use JavaScript's flow-control structures — if statements, while loops, and for loops — to build more complex functionality.
- Concept 01: If Statements
- Concept 02: While Loops
- Concept 03: For Loops
- Concept 04: For-In Loops
- Concept 05: Work!
- Concept 06: A Note About For-In Loops
- Concept 07: Functions
- Concept 08: Click Metrics
- Concept 09: Collecting Click Locations
- Concept 10: Return Statements
- Concept 11: Internationalize Names
- Concept 12: Encapsulation
- Concept 13: Encapsulating Functions
- Concept 14: Independent Research
- Concept 15: Customize the Portfolio
- Concept 16: The Final Project!
-
-
Module 03: Intro to jQuery
-
Lesson 01: The Basics: the DOM, $, and Selectors
Enter the exciting, interactive world of the DOM! Learn how to use JavaScript and jQuery to select and manipulate HTML elements on a page.
- Concept 01: Course Introduction
- Concept 02: Why Does jQuery Exist?
- Concept 03: What is jQuery actually
- Concept 04: Money, Money, Money (the $)
- Concept 05: How to Use the $
- Concept 06: DOM Inspiration
- Concept 07: How Is jQuery Included in a Page?
- Concept 08: Select by Tags
- Concept 09: Select by Classes Quiz
- Concept 10: Select by IDs
- Concept 11: Family Tree Revisited
- Concept 12: Filters Quiz
- Concept 13: High Five!
-
Lesson 02: The Tricks: DOM Manipulation
Now that you've seen how to select elements using jQuery, learn to manipulate the DOM and change a webpage dynamically.
- Concept 01: jQuery Documentation and You
- Concept 02: you.toggleClass() Quiz
- Concept 03: Toggling Classes Quiz
- Concept 04: Changing Attributes Quiz
- Concept 05: Modifying CSS Quiz
- Concept 06: Pulling HTML and Text
- Concept 07: Collecting Values Quiz
- Concept 08: Removing DOM Elements
- Concept 09: Adding DOM Elements
- Concept 10: Appending Child Elements
- Concept 11: Build a DOM (Family) Tree!
- Concept 12: Iterating with Each Quiz
- Concept 13: Why use jQuery? Quiz
- Concept 14: Outro
- Concept 15: $(function)
-
Lesson 03: Event Listeners with jQuery
Dive into the interactive world of DOM events using jQuery's Event Listeners! Learn how to use jQuery to respond to clicks, keyboard input, scrolling, and other common DOM events.
- Concept 01: Intro to Event Listening with jQuery
- Concept 02: What are Browser Events?
- Concept 03: monitorEvents Quiz
- Concept 04: Anatomy of a jQuery Event Listener
- Concept 05: jQuery Event Listener Order Quiz
- Concept 06: jQuery Event Listener
- Concept 07: The Event Object
- Concept 08: The Convenience Method
- Concept 09: Convenience Methods Quiz
- Concept 10: jQuery's multifunctional .on method
- Concept 11: Event Delegation
- Concept 12: Outro
-
-
Module 04: Project: Online Resume
-
Lesson 01: Online Resume
Once you've mastered the skills of a front end web developer you'll want to make a great first impression. You need a resume that stands out. The resume you build will not only help you build important skills, but will also make it easy to show employers why you’re perfect for the job. As you progress through this Nanodegree program you can update this resume with your new skills and projects.
-
Part 04 : Intermediate JavaScript
After laying a solid foundation with JavaScript basics, you're going to jump to the next level in your JavaScript skills. You'll learn all about Object-Oriented JavaScript techniques, closure, and the infamous "this" keyword. You'll also jump back into HTML by learning about the Canvas element. Using all of these skills, you'll create your own version of a classic arcade game.
-
Module 01: Object Oriented JavaScript
-
Lesson 01: Scopes
Learn what JavaScript scopes are and why understanding them is important to become a skilled JavaScript developer.
- Concept 01: Introduction
- Concept 02: Before You Continue
- Concept 03: Scopes and Closures
- Concept 04: Scopes : An example
- Concept 05: Lexical Scope
- Concept 06: Variable Access
- Concept 07: Scoping Limitations
- Concept 08: Calling the Functions
- Concept 09: Intro : Execution Contexts
- Concept 10: Execution Contexts vs. Lexical Scopes
- Concept 11: In-Memory Data Stores
- Concept 12: In-Memory Scopes vs In-Memory Objects
- Concept 13: Predicting Execution Context Output
- Concept 14: Building Multiple Execution Scopes
- Concept 15: Continuing Output Predictions
- Concept 16: Finishing Our Predictions
-
Lesson 02: Closures
Time to meet one of the trickier bits of JavaScript, closures. You'll learn how to use closures to maintain access to functions and their environment even after they've finished executing.
- Concept 01: Intro to Closures
- Concept 02: Retaining Access to Functions
- Concept 03: Predicting Code Output
- Concept 04: Predicting Execution Contexts
- Concept 05: Predicting Closure Output
- Concept 06: Predicting Closure Output (2)
- Concept 07: Predicting Closure Output (3)
- Concept 08: Predicting Closure Output (4)
- Concept 09: Predicting Closure Output (5)
- Concept 10: Predicting Execution Contexts (2)
- Concept 11: Predicting Closure Output (6)
- Concept 12: Outro
-
Lesson 03: The 'this' Keyword
Learn the importance of the 'this' keyword in JavaScript and see some of the common problems you'll run into when trying to utilize it in your code
- Concept 01: Intro
- Concept 02: Defining the keyword 'this'
- Concept 03: What is 'this' not bound to?
- Concept 04: What is 'this' bound to?
- Concept 05: Predicting Parameter Output
- Concept 06: Predicting Parameter Output (2)
- Concept 07: Predicting 'this' Output
- Concept 08: Predicting 'this' Output (2)
- Concept 09: Predicting 'this' Output (3)
- Concept 10: Predicting 'this' Output (4)
- Concept 11: Predicting 'this' Output (5)
- Concept 12: Deconstructing setTimeout
- Concept 13: Predicting 'this' Output (6)
- Concept 14: Determining 'this' Binding
- Concept 15: Predicting 'this' Output (7)
- Concept 16: Predicting 'this' Output (8)
- Concept 17: Predicting 'this' Output (9)
- Concept 18: Predicting 'this' Output with 'new'
- Concept 19: Outro
-
Lesson 04: Prototype Chains
Dive deep into JavaScript prototype chains. See how JavaScript uses them to manage objects and their properties.
- Concept 01: Prototype Chains
- Concept 02: Property Lookup
- Concept 03: 1-time property copying
- Concept 04: Predicting Prototype Delegation
- Concept 05: Predicting Undefined Property Lookups
- Concept 06: Property Lookup on Cloned Objects
- Concept 07: Property Lookup of Delegated Objects
- Concept 08: The object prototype
- Concept 09: Constructor property
- Concept 10: Array Prototype
- Concept 11: Conclusion - Prototype Chains
-
Lesson 05: Object Decorator Pattern
Learn your first pattern for modeling object-oriented code in JavaScript: the Object Decorator Pattern.
- Concept 01: Code Reuse
- Concept 02: Example of Code Reuse
- Concept 03: Programming our game
- Concept 04: Functions
- Concept 05: Benefits of refactoring code
- Concept 06: Decorator Functions
- Concept 07: Adding Methods to Constructors
- Concept 08: Predicting the Value of 'this'
- Concept 09: Recap of the 'this' parameter
- Concept 10: Refactoring to Consolidate Code
- Concept 11: Predicting Strict Comparison of Objects
- Concept 12: Strict Comparison of Returned Functions
- Concept 13: Refactoring the .move() Method
- Concept 14: Conclusion - Object Decorator Pattern
-
Lesson 06: Functional Classes
Learn another important tool in organizing your code: functional classes! Build upon the object decorator pattern by writing functions to extend methods on any object.
-
Lesson 07: Prototypal Classes
Learn to use the prototype key to streamline thinking about objects and improve your application's performance.
- Concept 01: Improving Performance
- Concept 02: One option for Improving Performace
- Concept 03: Delegation Relationships
- Concept 04: Constructor Prototypes
- Concept 05: How prototypes affect in-memory model
- Concept 06: .prototype vs .method
- Concept 07: .prototype ambiguity
- Concept 08: .prototype.constructor
- Concept 09: instanceof operator
- Concept 10: Conclusion : Prototypal classes
-
Lesson 08: Pseudoclassical Patterns
The Pseudoclassical pattern eases the transition for developers coming from traditional class-based languages, like Python or Java. Learn how to implement pseudoclassical design pattern inspired by other programming languages.
-
Lesson 09: Superclass and Subclasses
Learn to use to Superclasses and Subclasses to further streamline your code and reduce duplication.
-
Lesson 10: Pseudoclassical Subclasses
Learn how to utilize the 'this' keyword in your superclasses, set properties on your classes using .call(), and delegate prototypes to subclasses.
- Concept 01: Intro to Pseudoclassical Subclasses
- Concept 02: Building Out a Subclass
- Concept 03: Incorrect Solutions
- Concept 04: 'this' in Superclass using 'new'
- Concept 05: 'this' in Superclass without using 'new'
- Concept 06: .call()'s First Argument
- Concept 07: Using .call()
- Concept 08: Subclass Property Prototype Delegation
- Concept 09: Subclass Method Prototype Delegation
- Concept 10: Constructor Prototype Delegation
- Concept 11: Subclass Prototype Delegation
- Concept 12: Incorrect Subclass Prototype Delegation
- Concept 13: Using Object.create()
- Concept 14: Subclass Prototype Constructor Property
- Concept 15: Subclass Constructor Delegation
- Concept 16: Proper Subclass Constructor Delegation
- Concept 17: Psuedoclassical Subclassing Outro
- Concept 18: Outro
-
-
Module 02: HTML5 Canvas
-
Lesson 01: HTML5 Canvas Basics
Learn to draw graphics on the fly using Javascript and the HTML5 Canvas API.
- Concept 01: Introduction
- Concept 02: Somewhere Cool
- Concept 03: Demo and Rationale
- Concept 04: What is a Meme?
- Concept 05: Favorite Meme
- Concept 06: Creating a Canvas
- Concept 07: Coordinate system
- Concept 08: Loading Images Code
- Concept 09: Saving Images
- Concept 10: Create a local web server
- Concept 11: Drawing Rectangles
- Concept 12: Drawing your First Shapes - Workspace
- Concept 13: More about Rectangles
- Concept 14: Paths
- Concept 15: Moving Objects in a Canvas
- Concept 16: Using Transformations - Workspaces
- Concept 17: Saving and Restoring Canvas State
- Concept 18: Colors
- Concept 19: Drawing Text
- Concept 20: Drawing Text Quiz
- Concept 21: MemeMaker Programming Quiz
- Concept 22: Lesson Recap
-
Lesson 02: From Pixels to Animation
Go beyond static drawings and learn how to use Canvas and JavaScript to animate objects on a page
- Concept 01: Silent Film Vignette
- Concept 02: What is a pixel?
- Concept 03: Filters and Effects
- Concept 04: Canvas 2D Image data
- Concept 05: Grayscale Quiz
- Concept 06: Play with Pixel Manipulation - Workspaces
- Concept 07: Playing videos with Canvas
- Concept 08: requestAnimationFrame
- Concept 09: The Game Loop / Processing User Input
- Concept 10: Experiment Some More - Workspace
- Concept 11: You're DONE
-
-
Module 03: Writing READMEs
-
Lesson 01: Writing READMEs
Learn the importance of well documented code and see how to craft meaningful READMEs.
- Concept 01: Welcome
- Concept 02: What is Documentation?
- Concept 03: Who is Documentation For?
- Concept 04: How Does Nija Consume Documentation?
- Concept 05: Why Should Art Have Documented His Code?
- Concept 06: Introduction to READMEs
- Concept 07: Anatomy of a README
- Concept 08: Documenting a Growing Codebase
- Concept 09: Readable READMEs with Markdown
- Concept 10: Basic Markdown Syntax
- Concept 11: Basic Markdown Syntax Quiz
- Concept 12: More Markdown Syntax
- Concept 13: Markdown Syntax Practice
- Concept 14: Document Everything!
-
-
Module 04: Classic Arcade Game Clone
-
Lesson 01: Classic Arcade Game Clone
You will be provided with visual assets and a game loop engine; using these tools you must add a number of entities to the game including the player characters and enemies to recreate the classic arcade game Frogger.
-
Part 05 : Advanced Interactive Websites
In this unit, you'll learn how to take an already great website and optimize it for speed and efficiency. You'll learn about optimizing the Critical Rendering Path to help battle "jank" in your sites. You'll learn how to use APIs to send and retrieve data. You'll build organized, professional code using the MV* frameworks KnockoutJS and BackboneJS. You'll test your skills by optimizing a website that has some rendering problems. You'll also harness the power of the Google Maps API to create a neighborhood map application.
-
Module 01: Website Performance Optimization
-
Lesson 01: Website Performance Optimization
Follow along with Ilya Grigorik and Cameron Pittman as they get you set up to begin optimizing the speed and delivery of your web pages.
-
Lesson 02: The Critical Rendering Path
Learn why performance matters, how browsers actually bring your code to life, and how you can use Google Chrome's developer tools to inspect pages.
- Concept 01: Critical Rendering Path Walkthrough
- Concept 02: Converting HTML to the DOM
- Concept 03: Fast Google Search Responses
- Concept 04: Exploring Timeline Traces
- Concept 05: Building the DOM
- Concept 06: Converting CSS to the CSSOM
- Concept 07: Which styles render faster?
- Concept 08: Recalculating CSS Styles in DevTools
- Concept 09: The Render Tree
- Concept 10: Which screen elements are visible?
- Concept 11: Layout
- Concept 12: Calculating Layout
- Concept 13: Analyzing Layout in DevTools
- Concept 14: Finding Examples of Expensive Layouts
- Concept 15: Time to Paint the Page!
- Concept 16: Analyzing Paint in DevTools
- Concept 17: Steps to Render the Page
- Concept 18: Analyzing the Entire CRP in DevTools
- Concept 19: Practice Optimizing the CRP
- Concept 20: CRP Wrap Up
-
Lesson 03: Optimizing the CRP
Learn about the common issues that will cause render blocking, how to measure your pages performance, and begin improving your CRP to improve user experience.
- Concept 01: Optimizing the DOM
- Concept 02: When will the page render?
- Concept 03: Unblocking CSS with Media Queries
- Concept 04: Which stylesheets are render blocking?
- Concept 05: JavaScript and the CRP
- Concept 06: How will the text be rendered?
- Concept 07: External JavaScript Dependencies
- Concept 08: More on JavaScript Dependencies
- Concept 09: What optimizations would you try?
- Concept 10: Async JavaScript
- Concept 11: Pick the JavaScript Approach
- Concept 12: General Strategies and CRP Diagrams
- Concept 13: CRP Diagrams with External CSS
- Concept 14: Calculate CRP Metrics
- Concept 15: CRP Metrics Discussion
- Concept 16: Calculate the CRP Metrics 2
- Concept 17: What strategies would you try?
- Concept 18: Can you Calculate CRP Metrics from HTML?
- Concept 19: The Preload Scanner
- Concept 20: Draw a CRP Diagram - Easy
- Concept 21: Draw a CRP Diagram - Hard
- Concept 22: The Final Project Overview
- Concept 23: The Final Project Submission
- Concept 24: Course Feedback
- Concept 25: TCP Bonus Question
-
-
Module 02: Browser Rendering Optimization
-
Lesson 01: The Critical Rendering Path
Follow along with Paul Lewis and Cameron Pittman as they explain common performance issues on the web and what we should be hoping to achieve in terms of speed.
- Concept 01: Course Introduction
- Concept 02: Jank Invaders!
- Concept 03: Lesson Introduction
- Concept 04: Juddering
- Concept 05: Frames
- Concept 06: Milliseconds Per Frame
- Concept 07: What Goes Into One Frame
- Concept 08: Render Tree Quiz
- Concept 09: DOM, CSSOM, Render Tree
- Concept 10: Layout
- Concept 11: Layout and Paint
- Concept 12: Rendering Quiz
- Concept 13: CSS Research
- Concept 14: Final Project
- Concept 15: Lesson Outro
- Concept 16: Jank Invaders Leaderboard
-
Lesson 02: App Lifecycles
Learn about the four parts of a web app's lifecycle: RAIL (Response, Animate, Idle, and Load). You'll discover how these phases cause jank in your web apps.
- Concept 01: Lesson 2 Introduction
- Concept 02: RAIL
- Concept 03: Load and Idle
- Concept 04: Idle Time
- Concept 05: RAIL Response
- Concept 06: RAIL - Animations Part 1
- Concept 07: RAIL - Animations Part 2
- Concept 08: Rendering Animations
- Concept 09: Interactions and Animations
- Concept 10: RAIL Thresholds Review
- Concept 11: RAIL Scenario 1
- Concept 12: RAIL Scenario 2
- Concept 13: Lesson 2 Outro
-
Lesson 03: Weapons of Jank Destruction
Learn how to use Chrome's Developer Tools Timeline to find page jank and remove it from your site.
- Concept 01: Lesson 3 Introduction
- Concept 02: DevTools
- Concept 03: The Timeline in Depth
- Concept 04: Reading the Timeline
- Concept 05: Identifying Jank Sample
- Concept 06: Test… All the Devices!!!
- Concept 07: Setup for Mobile
- Concept 08: Using Dev Tools on Mobile
- Concept 09: Mobile Tools for iOS
- Concept 10: More Timeline Practice
- Concept 11: Finding Janky Functions
- Concept 12: Finding More Jank
- Concept 13: Lesson 3 Outro
-
Lesson 04: JavaScript
Learn how to use JavaScript to optimize animations and use web workers to speed up performance.
- Concept 01: Lesson 4 Introduction
- Concept 02: Just in Time
- Concept 03: Optimizing JS for Animations
- Concept 04: requestAnimationFrame
- Concept 05: JavaScript Profile
- Concept 06: Long Running JS
- Concept 07: Web Workers
- Concept 08: JS Memory Management
- Concept 09: A Snappier QR Code App Pt. 1
- Concept 10: A Snappier QR Code App Pt. 2
- Concept 11: Lesson 4 Outro
-
Lesson 05: Styles and Layout
Discover how changing styles can result in surprisingly slow page speed. You'll also learn how to prevent Forced Synchronous Layouts.
- Concept 01: Lesson 5 Introduction
- Concept 02: The Cost of Style Changes
- Concept 03: Selector Matching
- Concept 04: Selector Matching
- Concept 05: Recalculate Styles
- Concept 06: Layout Thrashing
- Concept 07: FSL
- Concept 08: Stopping FSL Strategy
- Concept 09: Causes of Forced Synchronous Layout
- Concept 10: Stop FSL
- Concept 11: Lesson 5 Outro
-
Lesson 06: Compositing and Painting
Learn how to manage page layers and improve page performance using the Chrome Dev Tools Paint Profiler.
- Concept 01: Lesson 6 Introduction
- Concept 02: Paint Rectangles
- Concept 03: Paint Profiler
- Concept 04: Compositing
- Concept 05: Conceptual Question about Layers
- Concept 06: Composite Layers
- Concept 07: Managing Layers
- Concept 08: Managing Layers 2
- Concept 09: Will-Change
- Concept 10: Your Compositing Budget
- Concept 11: Layer Counting
- Concept 12: Painting and Compositing
- Concept 13: Make Some Quizzes
- Concept 14: The Final Project
- Concept 15: Course Outro
-
-
Module 03: Intro to AJAX
-
Lesson 01: Requests and APIs
Learn how to request data from third party APIs using jQuery's AJAX functions. Examine AJAX queries in live applications and investigate APIs you can use in your own!
- Concept 01: Pre-Introduction
- Concept 02: Intro
- Concept 03: Client Server Demonstration
- Concept 04: AJAX Definition
- Concept 05: Asynchronous vs Synchronous Requests
- Concept 06: Facebook Example 1
- Concept 07: Facebook Example 2
- Concept 08: Facebook's AJAX Request
- Concept 09: Twitter Quiz
- Concept 10: Necessary components of an AJAX request
- Concept 11: API Inspiration
- Concept 12: Finding Examples of API Use
- Concept 13: API Brainstorm
- Concept 14: Download the Project
-
Lesson 02: Building the Move Planner App
Follow along as Cameron uses The New York Times API to build a moving planner app. Learn how to handle errors and how to debug your AJAX methods.
- Concept 01: Requests with jQuery
- Concept 02: Loading Streetview
- Concept 03: NYT API Key
- Concept 04: NYT Implementation
- Concept 05: Error Handling with NY Times
- Concept 06: CORS
- Concept 07: Wikipedia API
- Concept 08: Error Handling with JSON P
- Concept 09: Debugging
- Concept 10: Speeding up the First Render
- Concept 11: Finish
-
-
Module 04: JavaScript Design Patterns
-
Lesson 01: Changing Expectations
Learn why well-structured code is vitally important to a web app's structure, especially as the app gets larger. Explore how you can use MV* organizational framework to create cleaner projects.
- Concept 01: Welcome
- Concept 02: Introduce Cat Clicker and Andy
- Concept 03: Cat Clicker Requirements
- Concept 04: Reflections
- Concept 05: Andy's Reflections
- Concept 06: Requirements Change All The Time
- Concept 07: First Requirements Change
- Concept 08: Cat Clicker Requirements 2
- Concept 09: Reflections 2
- Concept 10: Andy's Reflections 2
- Concept 11: Closures and Event Listeners
- Concept 12: Second Requirements Change
- Concept 13: Cat Clicker Premium Requirements
- Concept 14: Reflections 3
- Concept 15: Andy's Reflections 3
- Concept 16: Spaghetti Code Story Time
- Concept 17: What is Spaghetti Code
- Concept 18: Introduction to MVO
- Concept 19: Explore The App's Structure
- Concept 20: Model Quiz
- Concept 21: View Quiz
- Concept 22: What Is the Model in Our Code
- Concept 23: What Is the View in Our Code
- Concept 24: What Is the Octopus in Our Code
- Concept 25: Identify the MVO in New App
- Concept 26: Where Should This Feature Live?
- Concept 27: Implement Note Date
- Concept 28: Segue Into L2
-
Lesson 02: Refactoring with Separation of Concerns
Begin refactoring your Cat Clicker code and learn the best ways to improve its structure.
- Concept 01: Introduction to Lesson 2
- Concept 02: Identify Model and View
- Concept 03: Review Model and View for CC Premium
- Concept 04: Identify Octopus
- Concept 05: Andy’s Code 1
- Concept 06: Andy's Code 2
- Concept 07: In Defense of Andy
- Concept 08: Rebuild Cat Clicker Premium
- Concept 09: Cat Clicker Premium Specs
- Concept 10: Cat Clicker Premium Solution
- Concept 11: Cat Clicker Premium Solution Review
- Concept 12: Cat Clicker Premium Pro
- Concept 13: Cat Clicker Premium Pro Specs
- Concept 14: How to Modernize Projects
- Concept 15: Interview with Nic
- Concept 16: Interview with Jacques
- Concept 17: Refactor Spaghetti Code
- Concept 18: Repository for Attendance App
- Concept 19: What Method Did You Use?
- Concept 20: Interview With The Author
- Concept 21: Refactoring the Resumé
- Concept 22: Repository Information for Resume
- Concept 23: Segue Into L3
-
Lesson 03: Using an Organization Library
Learn about MV* frameworks like KnockoutJS to improve your Cat Clicker Application.
- Concept 01: MVO in the wild
- Concept 02: Library vs Framework 1
- Concept 03: Library vs Framework 2
- Concept 04: Interview with Nic About Using Libraries
- Concept 05: Universal Organizational Concepts
- Concept 06: What Does Knockout Give Us
- Concept 07: Bindings and Views in Knockout
- Concept 08: Knockout Views Quiz
- Concept 09: Models in Knockout
- Concept 10: Knockout Models Quiz
- Concept 11: Interview about Documentation
- Concept 12: Smarter Arrays
- Concept 13: Smart Models Work Differently
- Concept 14: Benefits of Smart Models
- Concept 15: Similarities between jQuery and KnockOut
- Concept 16: Building Something with Knockout
- Concept 17: Cat Clicker HTML and Bindings
- Concept 18: Computed Observables
- Concept 19: Computed Observables Quiz
- Concept 20: Review of Terms
- Concept 21: Computed Observables in Practice
- Concept 22: Add Cat Levels to Cat Clicker
- Concept 23: Show Cats With Control Structures
- Concept 24: Separating Out the Model
- Concept 25: 'with' and Binding Contexts
- Concept 26: How I Implemented "With"
- Concept 27: Getting Ready To Add More Cats
- Concept 28: Adding More Cats
-
Lesson 04: Learning a New Codebase
Learn how to work with new codebases and gain familiarity with the popular BackboneJS Framework.
- Concept 01: Interview: Gaining Context
- Concept 02: What's Next
- Concept 03: Exploring a New Codebase
- Concept 04: Codebase Quiz
- Concept 05: Getting the Big Picture of our Library
- Concept 06: Interview: Be Tofu
- Concept 07: Exploring a Codebase
- Concept 08: Modifying a Feature
- Concept 09: Adding Additional UI
- Concept 10: Adding a New Feature
- Concept 11: More Ideas
-
-
Module 05: Google Maps APIs
-
Lesson 01: Getting Started with the APIs
Set up your developer credentials and get started with the Google Maps APIs.
- Concept 01: Intro
- Concept 02: Your Project
- Concept 03: Your API Key
- Concept 04: The JavaScript API Overview
- Concept 05: Hello Map
- Concept 06: Making your Mark
- Concept 07: Window Shopping Part 1
- Concept 08: Window Shopping Part 2
- Concept 09: Markers Infowindows
- Concept 10: Being Stylish
- Concept 11: Styles
- Concept 12: Static Maps and Street View Imagery
- Concept 13: Imagery
- Concept 14: Pitch and Heading
- Concept 15: Library Cards
- Concept 16: Geometry and Visualization
- Concept 17: Drawing
- Concept 18: Drawing and Geometry
-
Lesson 02: Understanding API Services
Explore the location services available in the Google Maps APIs, including the Geocoding, Elevation, and Directions APIs.
- Concept 01: Web Services and Geocoding Part 1
- Concept 02: Web Services and Geocoding Part 2
- Concept 03: Geocoding Requests and Responses
- Concept 04: Status
- Concept 05: Geocoding Requests and Responses
- Concept 06: Geocoding in the App
- Concept 07: Interpreting Geocoding Responses
- Concept 08: No Mountain High Enough - Elevation API
- Concept 09: My Commute - Distance Matrix API Part 1
- Concept 10: My Commute - Distance Matrix API Part 2
- Concept 11: I want to ride my bicycle
- Concept 12: My Commute - Directions API
- Concept 13: Displaying Routes Directions Service
- Concept 14: From me to you
- Concept 15: Distance Matrix and Directions Specifics
- Concept 16: The Long and Winding Roads Roads API
- Concept 17: The Roads Less Travelled
- Concept 18: Speed Limits Request
- Concept 19: Roads API
- Concept 20: Faster is Better - Place Autocomplete 1
- Concept 21: Faster is Better - Place Autocomplete 2
- Concept 22: Devil in the Details - Places Details
- Concept 23: Places I Remember
- Concept 24: Here, There, and Everywhere
- Concept 25: Across the Universe TimeZone API
- Concept 26: Time after Time
- Concept 27: I am here, oh wait, where am I?
- Concept 28: The Journey so Far
-
Lesson 03: Using the APIs in Practice
Learn the practical details you need to know to use the Google Maps APIs in the real world.
-
Lesson 04: Neighborhood Map
You will develop a single-page application featuring a map of your neighborhood or a neighborhood you would like to visit. You will then add additional functionality to this application, including: map markers to identify popular locations or places you'd like to visit, a search function to easily discover these locations, and a listview to support simple browsing of all locations. You will then research and implement third-party APIs that provide additional information about each of these locations (such as StreetView images, Wikipedia articles, Yelp reviews, etc).
-
-
Module 06: JavaScript Testing
-
Lesson 01: Rethinking Testing
Learn why writing tests is an important part of any project and get started writing your own tests.
-
Lesson 02: Writing Test Suites
Learn how to use the Jasmine test suite to run tests against your code and handle varying situations including asynchronous code.
- Concept 01: Introduction to Jasmine
- Concept 02: Exploring the SpecRunner
- Concept 03: Identifying Suites and Specs
- Concept 04: Introducing Suites and Specs
- Concept 05: Writing a Test
- Concept 06: Multiple Tests per Spec
- Concept 07: Getting Started with Red-Green-Refactor
- Concept 08: Writing AddressBookSpec.js
- Concept 09: Writing our Implementation
- Concept 10: Iterating on our Implementation
- Concept 11: Complete our Implementation
- Concept 12: Mike's Solution
- Concept 13: Another Spec
- Concept 14: Removing Redundant Code
- Concept 15: Testing Asynchronous Code
- Concept 16: Writing an Asynchronous Test
- Concept 17: Running our First Async Test
- Concept 18: Correcting our Asynchronous Test
- Concept 19: Course Conclusion
-
Lesson 03: Feed Reader Testing
You have been given a feed reader application that another developer has worked on, and now need to write tests against it using Jasmine's testing syntax.
-
Part 06 (Elective): Webcasts
-
Module 01: Webcasts
-
Lesson 01: Build a Portfolio Site Webcasts
You will develop a responsive website that will display images, descriptions and links to each of the portfolio projects you will complete throughout the course of your Nanodegree program.
- Concept 01: About the Webcasts
- Concept 02: Build a Portfolio - Rubric
- Concept 03: CSS Basics and Box Model
- Concept 04: Advanced topic - Flexbox Demo
- Concept 05: Setting up a Grunt Workflow (Summary)
- Concept 06: Setting up a Grunt Workflow Demo
- Concept 07: Setting Up a Gulp Workflow (Summary)
- Concept 08: Setting up a Gulp Workflow Demo
- Concept 09: How to Use the Forums
-
Lesson 02: Online Resume Project Webcasts
Webcasts from coaches to help you with your Online Resume Project.
-
Lesson 03: Website Optimization Project Webcasts
Webcasts from coaches to help you with your Website Optimization Project.
- Concept 01: Website Optimization Webcasts Intro
- Concept 02: Website Optimization - Rubric
- Concept 03: Tips-PageSpeed Score
- Concept 04: Tips - Increasing Framerate (FPS)
- Concept 05: Advanced Topic - Grunt
- Concept 06: Advanced - Hosting your site & PageSpeed
- Concept 07: Q & A
- Concept 08: Chrome (48) Dev Tools (Feb 29)
-
Lesson 04: Classic Arcade Game Clone Project Webcasts
Webcasts from coaches to help you with your Classic Arcade Game Clone Project.
-
Lesson 05: Neighborhood Map Project Webcasts
Webcasts from coaches to help you with your Neighborhood Map Project.
-
Lesson 06: Feed Reader Testing Project Webcasts
Webcasts from coaches to help you with your Feed Reader Testing Project.
-
Part 07 (Career): Career: Job Search Strategies
Opportunity can come when you least expect it, so when your dream job comes along, you want to be ready.
-
Module 01: Conduct a Job Search
-
Lesson 01: Conduct a Job Search
Learn how to search for jobs effectively through industry research, and targeting your application to a specific role.
-
-
Module 02: Refine Your Resume
-
Lesson 01: Refine Your Entry-Level Resume
Receive a personalized review of your resume. This resume review is best suited for applicants who have 0-3 years of work experience in any industry.
-
Lesson 02: Refine Your Career Change Resume
Receive a personalized review of your resume. This resume review is best suited for applicants who have 3+ years of work experience in an unrelated field.
-
Lesson 03: Refine Your Prior Industry Experience Resume
Receive a personalized review of your resume. This resume review is best suited for applicants who have 3+ years of work experience in a related field.
Project Description - Resume Review Project (Prior Industry Experience)
Project Rubric - Resume Review Project (Prior Industry Experience)
- Concept 01: Convey Your Skills Concisely
- Concept 02: Effective Resume Components
- Concept 03: Resume Structure
- Concept 04: Describe Your Work Experiences
- Concept 05: Resume Reflection
- Concept 06: Resume Review
- Concept 07: Resume Review (Prior Industry Experience)
- Concept 08: Resources in Your Career Portal
-
-
Module 03: Write an Effective Cover Letter
-
Lesson 01: Craft Your Cover Letter
Get a personalized review of your cover letter. A successful cover letter will convey your enthusiasm, specific technical qualifications, and communication skills applicable to the position.
-
Part 08 (Career): Career: Networking
Networking is a very important component to a successful job search. In the following lesson, you will learn how tell your unique story to recruiters in a succinct and professional but relatable way.
-
Module 01: Develop Your Personal Brand
-
Lesson 01: Develop Your Personal Brand
In this lesson, learn how to tell your unique story in a succinct and professional way. Communicate to employers that you know how to solve problems, overcome challenges, and achieve results.
-
Lesson 02: LinkedIn Review
Optimize your LinkedIn profile to show up in recruiter searches, build your network, and attract employers. Learn to read your LinkedIn profile through the lens of a recruiter or hiring manager.
-
-
Module 02: GitHub Profile Review
-
Lesson 01: GitHub Review
Review how your GitHub profile, projects, and code represent you as a potential job candidate. Learn to assess your GitHub profile through the eyes of a recruiter or hiring manager.
- Concept 01: Introduction
- Concept 02: GitHub profile important items
- Concept 03: Good GitHub repository
- Concept 04: Interview with Art - Part 1
- Concept 05: Identify fixes for example “bad” profile
- Concept 06: Quick Fixes #1
- Concept 07: Quick Fixes #2
- Concept 08: Writing READMEs with Walter
- Concept 09: Interview with Art - Part 2
- Concept 10: Commit messages best practices
- Concept 11: Reflect on your commit messages
- Concept 12: Participating in open source projects
- Concept 13: Interview with Art - Part 3
- Concept 14: Participating in open source projects 2
- Concept 15: Starring interesting repositories
- Concept 16: Outro
- Concept 17: Resources in Your Career Portal
-
Part 09 (Career): Career: Front-End Interview Practice
Now that you've practiced your skills through your project work, learn how you can present your knowledge in an interview.
-
Module 01: Interview Practice (Front-End)
-
Lesson 01: Ace Your Interview
Learn strategies to prepare yourself for an interview.
-
Lesson 02: Practice Behavioral Questions
Practice answering behavioral questions and evaluate sample responses.
- Concept 01: Introduction
- Concept 02: Self-Practice: Behavioral Questions
- Concept 03: Analyzing Behavioral Answers
- Concept 04: Time When You Showed Initiative?
- Concept 05: What Motivates You at the Workplace?
- Concept 06: A Problem and How You Dealt With It?
- Concept 07: What Do You Know About the Company?
- Concept 08: Time When You Dealt With Failure?
-
Lesson 03: Interview Fails
Some real-life examples of interviews that didn't go as expected - it happens all the time!
-
Lesson 04: Land a Job Offer
You've practiced a lot for the interview by now. Continue practicing, and you'll ace the interview!
-
Lesson 05: Front-End Interview Questions
This course will help demystify what it takes to secure a job as a Front-End Developer and provide practice and feedback to help strengthen your candidacy.
- Concept 01: Analyzing an Interview
- Concept 02: What Got You Interested in WebDev?
- Concept 03: What New WebDev Excites You the Most?
- Concept 04: Teach Me Something in 5 Minutes
- Concept 05: Can You Build Me a Carousel?
- Concept 06: Can You Write a Palindrome Function?
- Concept 07: What is a Closure? When Would You Use One?
- Concept 08: A Problem and How You've Dealt With It?
- Concept 09: Mike's Analysis of the Interview
- Concept 10: Resources in Your Career Portal
-
Part 10 (Elective): How to Use Git and GitHub
Learn how to use version control to save and share your projects with others.
-
Module 01: Version Control with Git & GitHub
-
Lesson 01: What is Version Control?
Version control is an incredibly important part of a professional programmer's life. In this lesson, you'll learn about the benefits of version control and install the version control tool Git!
-
Lesson 02: Create A Git Repo
Now that you've learned the benefits of Version Control and gotten Git installed, it's time you learn how to create a repository.
-
Lesson 03: Review a Repo's History
Knowing how to review an existing Git repository's history of commits is extremely important. You'll learn how to do just that in this lesson.
-
Lesson 04: Add Commits To A Repo
A repository is nothing without commits. In this lesson, you'll learn how to make commits, write descriptive commit messages, and verify the changes you're about to save to the repository.
-
Lesson 05: Tagging, Branching, and Merging
Being able to work on your project in isolation from other changes will multiply your productivity. You'll learn how to do this isolated development with Git's branches.
-
Lesson 06: Undoing Changes
Help! Disaster has struck! You don't have to worry, though, because your project is tracked in version control! You'll learn how to undo and modify changes that have been saved to the repository.
-
Lesson 07: Working With Remotes
You'll learn how to create remote repositories on GitHub and how to get and send changes to the remote repository.
-
Lesson 08: Working On Another Developer's Repository
In this lesson, you'll learn how to fork another developer's project. Collaborating with other developers can be a tricky process, so you'll learn how to contribute to a public project.
-
Lesson 09: Staying In Sync With A Remote Repository
You'll learn how to send suggested changes to another developer by using pull requests. You'll also learn how to use the powerful
git rebase
command to squash commits together.
-
Part 11 (Elective): (Optional) Project: Health Tracker
This is an optional project; you are not required to complete this project to graduate your Nanodegree.
Using Backbone, you will develop a single page app that tracks the user's calorie intake, and optionally, other health-related metrics. Typing food names into the search field will display a list of matching foods as provided by the health API. Users will be able to select an item from the list, and the item will be added to the list of foods the user is tracking. The total calorie count will also update to reflect the new daily total.
-
Module 01: Learn Backbone.js
-
Lesson 01: Learning More About Backbone
Ben Jaffe introduces you to the Backbone course and explains why knowing how to utilize documentation is important when learning any new framework.
-